<template>
  <div>
    <van-nav-bar
      title="个人中心"
      class="page-nav-bar"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <input type="file" ref="file" hidden @change="onFileChange"/>
    <van-cell title="头像" value="内容" is-link @click="$refs.file.click()">
      <van-image
        round
        class="avatar"
        src="userInfo.photo"
      />
    </van-cell>
    <van-cell @click="isShowEditNickName = true" title="昵称" is-link :value="userInfo.name" />
    <van-cell @click="isShowEditSex = true" title="性别" is-link :value="!userInfo.gender ? '男♀' : '♂女'" />
    <van-cell @click="isShowEditBirthday = true" title="生日" is-link :value="userInfo.birthday" />
    <!-- 编辑昵称弹层 -->
    <van-popup v-model="isShowEditNickName" position="bottom" :style="{ height: '100%' }">
      <updateName v-model="userInfo.name" @click-left="isShowEditNickName = false"/>
    </van-popup>
    <!-- 编辑昵称弹层 -->
    <!-- 编辑性别弹层 -->
    <van-popup v-model="isShowEditSex" position="bottom">
      <updateSex v-if="isShowEditSex" @close="isShowEditSex = false" v-model="userInfo.gender"/>
    </van-popup>
    <!-- 编辑性别弹层 -->
    <!-- 编辑生日弹层 -->
    <van-popup v-model="isShowEditBirthday" position="bottom">
     <updateBirthday v-if="isShowEditBirthday" @close="isShowEditBirthday = false" v-model="userInfo.birthday"/>
    </van-popup>
    <!-- 编辑生日弹层 -->
    <!-- 编辑头像弹层 -->
    <van-popup v-model="isShowEditPhoto" position="bottom" style="height: 100%">
     <updatePhoto @onSuccess="userInfo.photo = $event" v-if="isShowEditPhoto" @cancel="isShowEditPhoto = false" :img="img"/>
    </van-popup>
    <!-- 编辑头像弹层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import updateName from './comments/update-name'
import updateSex from './comments/update-sex'
import updateBirthday from './comments/update-birthday'
import updatePhoto from './comments/update-photo'
console.log(updateName)
export default {
  name: 'user',
  data () {
    return {
      userInfo: [],
      isShowEditNickName: false,
      isShowEditSex: false,
      isShowEditBirthday: false,
      isShowEditPhoto: false,
      img: null
    }
  },
  components: {
    updateName,
    updateSex,
    updateBirthday,
    updatePhoto
  },
  created () {
    this.loadGetUser()
  },

  methods: {
    async loadGetUser () {
      try {
        const { data: { data } } = await getUserProfile()
        console.log(data)
        this.userInfo = data
      } catch (err) {
        this.$toast.fail('获取用户信息失败')
      }
    },
    // 点击选择图片
    onFileChange () {
      // 获取上传的图片
      const file = this.$refs.file.files[0]
      // 基于文章对象blob数据
      this.img = window.URL.createObjectURL(file)
      // 展示预览图片弹出层
      this.isShowEditPhoto = true
      // file-input如果选了一个文件不会触发change事件
      // 解决办法就是每次使用完毕，把他的value清空
      // 防止俩次的value值相同不触发change事件
      this.$refs.file.value = ''
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.page-nav-bar {
  .van-icon-arrow-left {
    color: #fff;
  }
}
.avatar {
  width: 50px;
  height: 50px;
}
</style>
